import React, { FC, useState } from "react";

const StateDemo02: FC = () => {
  const [userInfo, setUserInfo] = useState({ name: "SerMs", age: 20 });

  function changeAge() {
    // 不可变数据: 不是去修改state值，而是要传入一个新的值
    setUserInfo({
      //   name: "SerMs",
      ...userInfo,
      age: 32,
    });
  }

  const [list, setList] = useState(["x", "y"]);
  function addItem() {
    // concat 返回的是新数组
    // setList(list.concat("z"));
    setList([...list, "SerMs"]);
  }
  return (
    <div>
      <h2>state 不可变数据</h2>
      <div>{JSON.stringify(list)}</div>
      <button onClick={addItem}>change age</button>
      {/* <div>{JSON.stringify(userInfo)}</div>
      <button onClick={changeAge}>change age</button> */}
    </div>
  );
};

export default StateDemo02;
